<template>
  <div class="main-box">
    <el-container>
      <el-aside width="200px">
        <!--        logo区域-->
        <div class="aside-logo">
          <img src="../../assets/myLogo.jpg" alt="">
          <span>尚马管理系统</span>
        </div>

        <!--        导航区域-->
        <!--

             background-color="#9932CC"
                    text-color="#00FFFF"
                    active-text-color="#FF0000"

                 el-scrollbar 表示可滚动的区域
                    使用步骤： 这个标签体中 是需要滚动的内容
                            el-scroller指定高度 这个时候 就会在这个高度内容滚动
        -->

        <el-scrollbar>
          <el-menu
              default-active="4"
              router
              class="el-menu-vertical-demo"
          >
            <huige-menu-item v-for="(item,index) in menuList" :key="index" :meizi="item"/>


          </el-menu>

        </el-scrollbar>


      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <div class="body-box">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import huigeMenuItem from "@/components/huigeMenuItem";

export default {
  components: {huigeMenuItem},
  name: "index",

  created() {
    this.menuList = JSON.parse(localStorage.getItem("menuList"));
  },
  data() {
    return {
      menuList: []
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">

.main-box {
  width: 100%;
  height: 100%;
}


.el-scrollbar {
  height: calc(100% - 60px);
}

.el-header {
  background-color: #409EFF;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: white;

  .aside-logo {
    height: 60px;
    line-height: 60px;
    background-color: #409EFF;
    padding-left: 10px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 8px;
    }

    span {
      font-weight: 700;
      font-family: 华文行楷;
      font-size: 20px;
    }

  }


}

.el-main {
  background-color: #E9EEF3;
  padding: 5px 0px 0px 5px;
  color: #333;

  .body-box {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 15px 0px 0px 15px;
    box-sizing: border-box;
  }

}

.el-container {
  height: 100%;
}


</style>
